<!-- 登录 -->
<template>
    <div class="login_container" @keyup.enter="enter">
        <!-- 登录框 -->
        <div class="login_box">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                label-width="auto" class="demo-ruleForm">
                <el-form-item label="账户" prop="account">
                    <el-input v-model="ruleForm.account" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" />
                </el-form-item>
                <el-form-item>
                    <div style=" width: 100%; display: flex; justify-content: space-around">
                        <el-button size="large" round type="primary" @click="submitForm(ruleFormRef)">
                            登录
                        </el-button>
                        <el-button size="large" round type="success" @click="modelValue = true">
                            注册
                        </el-button>
                    </div>

                </el-form-item>
            </el-form>
        </div>
        <LoadingWait v-show="isshow" />

        <!-- 注册 -->
        <registerPage v-model="modelValue" />
        <!-- <el-input v-model="input" style="width: 240px" placeholder="Please input" />
        <el-input v-model="codeInput" style="width: 240px" placeholder="请输入验证码" />
        <button @click="clickCode">验证码</button>
        <button @click="clickVerify">验证验证码</button> -->
    </div>
</template>

<script setup>
import registerPage from './components/register-page.vue'
import { reactive, ref } from 'vue'
import { $_login, $_sendEmailCode, $_verifyCode } from "@/apis/user.js";
import { UseuserInfo } from "@/store/user.js";
import { useRouter } from 'vue-router';
import LoadingWait from "../../components/LoadingWait.vue";
let router = useRouter()
const ruleForm = reactive({
    account: '18228545758',
    password: '12345678',
})
const modelValue = ref(false)
const input = ref('')
const codeInput = ref('')
const isshow = ref(false)
const { getToken, getUserInfo } = UseuserInfo()

const rules = reactive({
    account: [
        { required: true, message: '用户名不能为空' }
    ],
    password: [
        { required: true, message: '密码不能为空' },
        { min: 6, max: 24, message: '密码长度要求6-14个字符' }
    ],
})
// 确定
const submitForm = () => {
    isshow.value=true
    $_login({
        account: ruleForm.account,
        password: ruleForm.password
    }).then(res => {
        if (res.success) {
            isshow.value=false
            localStorage.token = res.data.token
            getToken(res.data.token)
            getUserInfo(res.data.results[0])
            // router.push('/user')
            router.push('/management/home')
        }
    })
    .catch(err => {
        isshow.value=false
        console.log(err, '登录失败');
        ElMessage({
                message: '登录失败',
                type: 'error',
            })
    })

}
const enter = () => {
    // submitForm()
    console.log(';;;');
}

//验证码
const clickCode = () => {
    $_sendEmailCode({ emitName: input.value }).then(res => {
        console.log(res, '验证码...');
    })
}
function generateRandomSixDigitNumber() {
    return Math.floor(Math.random() * (1000000 - 10000 + 1)) + 10000;
}
console.log(generateRandomSixDigitNumber());


//验证验证码
const clickVerify = () => {
    $_verifyCode({
        mailNum: input.value,
        mailCode: codeInput.value
    }).then(res => {
        console.log(res, '验证验证码...');
    })
}
// 定位函数
// function getLocation() {
//     console.log('开始定位了');
//     navigator.geolocation.getCurrentPosition(
//         position => {
//             showLocation(position);
//         },
//         error => {
//             switch (error.code) {
//                 case error.PERMISSION_DENIED:
//                     console.error('用户拒绝了位置访问');
//                     break;
//                 case error.POSITION_UNAVAILABLE:
//                     console.error('位置信息不可用');
//                     break;
//                 case error.TIMEOUT:
//                     console.error('获取位置超时');
//                     break;
//                 case error.UNKNOWN_ERROR:
//                     console.error('未知错误');
//                     break;
//             }
//         },
//         { enableHighAccuracy: true, timeout: 60000, maximumAge: 0 }
//     );
// }
// function showLocation(position) {
//     const lat = position.coords.latitude;
//     const lng = position.coords.longitude;
//     console.log(`您的位置：纬度 ${lat}，经度 ${lng}`);
//     // 在这里可以将位置信息用于其他业务逻辑，比如显示在地图上
// }
// getLocation()


</script>

<style lang="scss" scoped>
.login_container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/imgs/bac.jpg') center/cover;

    .login_box {
        border: 1px solid pink;
        box-shadow: 2px 2px 2px 2px pink;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>